<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :maskClosable="false"
    :keyboard="false"
    :forceRender="true"
    @cancel="handleCancel"
    wrapClassName="ant-modal-cust-warp"
    style="top:5%;height: 100%;overflow-y: hidden">
    <template slot="footer">
      <!--此处为解决缓存问题-->
      <a-button key="back" @click="handleCancel">关闭</a-button>
    </template>
    <a-form :form="form">
      <!--发货统计-->
      <template v-if="billType === '下单管理'">
        <section ref="print" id="retailOutPrint">
          <a-row class="form-row" :gutter="24">
            <a-col :lg="18" :md="12" :sm="24">
              <div :style="tableWidthRetail">
                <a-table
                  ref="table"
                  size="middle"
                  bordered
                  rowKey="id"
                  :pagination="false"
                  :columns="columns"
                  :dataSource="dataSource">
                </a-table>
              </div>
            </a-col>
          </a-row>
        </section>
      </template>
    </a-form>
  </j-modal>
</template>

<script>
  import pick from 'lodash.pick'
  import { getAction,downFile } from '@/api/manage'
  import JUpload from '@/components/jeecg/JUpload'
  import Vue from 'vue'
  export default {
    name: 'EngineerProduceStatistic',
    components: {
      JUpload
    },
    data () {
      return {
        title: "详情",
        width: '1600px',
        visible: false,
        model: {},
        billType: '',
        fileName:'',
        fileList: [],
        tableWidth: {
          'width': '1550px'
        },
        tableWidthRetail: {
          'width': '1150px'
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        form: this.$form.createForm(this),
        loading: false,
        dataSource: [],
        url: {
          detailList: '/engineerProduce/getEngineerProduceStatistic',
        },
        //表头
        columns:[],
        //列定义
        defColumns: [],
        retailOutColumns: [
       
          { title: '产品名称', dataIndex: 'name'},
          { title: '产品型号', dataIndex: 'model' },
          { title: '产品规格(宽*高*长)', dataIndex: 'size' },
          { title: '产品数量', dataIndex: 'num' },
          { title: '产品单位', dataIndex: 'unit'},
        ]
      }
    },
    created () {
    },
    methods: {
     
      initSetting(record, type) {
        if (type === '下单管理') {
          this.columns = this.retailOutColumns
        }
      },
      show(record, type) {
        this.initSetting(record, type)
        this.billType = type
        //附件下载
        this.fileList = record.fileName
        this.visible = true;
        this.model = Object.assign({}, record);
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'id'))
        });
        let params = {
          headerId: this.model.engineerId
        }
        let url = this.readOnly ? this.url.detailList : this.url.detailList;
        this.requestSubTableData(url, params);
      },
      requestSubTableData(url, params, success) {
        this.loading = true
        getAction(url, params).then(res => {
          if(res && res.code === 200){
            this.dataSource = res.data.rows
            typeof success === 'function' ? success(res) : ''
          }
        }).finally(() => {
          this.loading = false
        })
      },
      handleCancel() {
        this.close()
      },
      close() {
        this.$emit('close');
        this.visible = false;
      }
    }
  }
</script>

<style scoped>

</style>